<template>
	<view>
        <u-popup :show="loginPopupShow" mode="bottom" :round="10" @close="closeLogin" zIndex="10076">

            <view class="f__login">
                <view class="loginLoading" v-if="isLoading">
                    <u-loadmore status="loading" loadingText="正在登录..."></u-loadmore>
                </view>
         <!--       <view class="logo">
                    <image class="img" :src="initMain.content?initMain.content.logo:''"></image>
                </view>-->
                <block v-if="loginType == 'forget'">
                    <view class="head-box">
                        <view class="title">重置密码</view>
                        <view class="text">请先进行安全验证，再设置密码以保障您的账号安全</view>
                    </view>

                </block>
                <block v-if="loginType == 'sms' || loginType == 'pwd'">
                    <view class="head-box">
                        <view class="title">{{loginType == 'sms'?'验证码登录':'密码登录'}}</view>
                        <view class="text">{{loginType == 'sms'?'如还未注册，通过验证码登录即为注册':'如密码错误，请点击忘记密码'}}</view>
                    </view>
                </block>
                <block v-if="loginType =='auth'">
                    <view class="head-box">
                        <view class="title">欢迎登录~</view>
                        <view class="text">会员用户登录，享受更好的服务体验</view>
                    </view>
                </block>
                <!-- 隐藏无用-->
                <view class="loginButton" v-if="loginType=='auth'">
                    <button v-if="platform=='wxOfficialAccount' || platform=='wxMiniProgram'" class="button" @click="onAuthorization" :style="{background:themeColor}">微信授权登录</button>
                    <!-- #ifdef MP-WEIXIN -->
                    <button class="button marginT" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" :style="{background:themeColor}">微信手机号登录</button><!-- 此功能需微信认证 -->
                    <!-- #endif -->
                    <button class="button" @click="closeLogin" style="background:#fff;margin-top:24rpx;" :style="{border:'2rpx solid '+themeColor,color:themeColor}">
                        暂不登录
                    </button>
                </view>
                <!-- 验证码登录 -->
                <view class="loginPhone" v-if="loginType=='sms'">
                    <view class="form-row">
                       <u-input
                                :customStyle="inputStyle"
                                placeholder="请输入手机号码"
                                border="none"
                                type="number"
                                v-model="phone"
                        >
                           <template slot="suffix">
                               <view class="getvcode" :style="'border:1px solid '+themeColor+';color:'+themeColor" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view>
                           </template>
                       </u-input>
                    </view>
                    <view class="form-row">
                        <u-input v-model="vCode" placeholder="请输入验证码" border="none" :customStyle="inputStyle">
                            <template slot="suffix">
                                <u-button shape="circle" @click="onSubmit" :customStyle="btnStyle" throttleTime="2" :color="themeColor" type="primary" text="注册/登录"></u-button>
                            </template>
                        </u-input>
                    </view>
                </view>
                <!-- 密码登录 -->
                <view class="loginPhone" v-if="loginType=='pwd'">
                    <view class="form-row">
                        <u-input v-model="phone" placeholder="请输入账号" border="none" :customStyle="inputStyle">
                            <template slot="suffix">
                                <view class="forget-btn" @click="setLoginType('forget')">忘记密码</view>
                            </template>
                        </u-input>
                    </view>
                    <view class="form-row">
                        <u-input
                                :customStyle="inputStyle"
                                placeholder="请输入密码"
                                border="none"
                                password
                                v-model="password"
                        >
                            <template slot="suffix">
                                <u-button shape="circle" @click="onSubmit" :customStyle="btnStyle" throttleTime="2" :color="themeColor" type="primary" text="登录"></u-button>
                            </template>
                        </u-input>
                    </view>
                </view>
                <!-- 忘记密码 -->
                <view class="loginPhone" v-if="loginType=='forget'">
                    <view class="form-row">
                        <u-input v-model="phone" type="number" placeholder="请输入手机号码" border="none" :customStyle="inputStyle"></u-input>
                    </view>
                    <view class="form-row">
                        <u-input v-model="vCode" placeholder="请输入验证码" border="none" :customStyle="inputStyle">
                            <template slot="suffix">
                                <view class="getvcode" :style="'border:1px solid '+themeColor+';color:'+themeColor" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view>
                            </template>
                        </u-input>
                    </view>
                    <view class="form-row">
                        <u-input
                                :customStyle="inputStyle"
                                placeholder="请输入密码"
                                border="none"
                                password
                                v-model="password"
                        >
                            <template slot="suffix">
                                <u-button shape="circle" @click="onForgetSubmit" :customStyle="btnStyle" throttleTime="2" :color="themeColor" type="primary" text="确定"></u-button>
                            </template>
                        </u-input>
                    </view>
                    <u-divider text="返回登录" @click="setLoginType('pwd')" :customStyle="{margin:'40rpx 0'}" textColor="#999999"></u-divider>

                </view>
                <block v-if="loginType!='forget'">
                    <u-divider text="其他登录方式" :customStyle="{margin:'40rpx 0'}" textColor="#999999"></u-divider>
                    <view class="tips">
                        <block v-if="platform=='wxOfficialAccount' || platform=='wxMiniProgram'" >
                            <view @click="onAuthorization" class="goBuy mr50">
                                <view class="go-icon" style="background-color: #07c160">
                                    <u-icon  name="weixin-fill" size="30" color="#FFFFFF"></u-icon>
                                </view>
                                <view class="go-text mt10">微信</view>
                            </view>

                            <button v-if="platform=='wxMiniProgram'" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" class="goBuy mr50" style="margin-left:0 ">
                                <view class="go-icon" style="background-color: #000000" >
                                    <u-icon  name="/static/images/user/phone.png" size="25" color="#FFFFFF"></u-icon>
                                </view>
                                <view class="go-text mt10">手机号</view>
                            </button>
                        </block>

                        <view @click="setLoginType('pwd')" class="goBuy" v-if="loginType=='sms'">
                            <view class="go-icon" :style="{'backgroundColor':themeColor}">
                                <u-icon  name="lock-fill" size="30" color="#FFFFFF" ></u-icon>
                            </view>
                            <view class="go-text mt10">密码</view>
                        </view>
                        <view @click="setLoginType('sms')" class="goBuy" v-if="loginType=='pwd'">
                            <view class="go-icon" :style="{'backgroundColor':themeColor}">
                                <u-icon  name="chat-fill" size="30" color="#FFFFFF" ></u-icon>
                            </view>
                            <view class="go-text mt10">短信</view>
                        </view>
                    </view>
                    <view class="agreement wlkflex justify-center">
                        <view class="icon wlkflex" :style="{borderColor:isAgree?themeColor:'#eee'}" @click="isAgree = !isAgree">
                            <view v-if="isAgree">
                                <u-icon name="checkbox-mark" :size="14" :color="themeColor"></u-icon>
                            </view>
                        </view>
                        <view class="agree-text">我已阅读并同意</view>
                        <view @click="jump(initMain.content?initMain.content.agreement:'')" class="protocol" :style="'color: '+themeColor">《服务协议》</view>
                        <span class="and">与</span>
                        <view @click="jump(initMain.content?initMain.content.privacy:'')"  class="protocol" :style="'color: '+themeColor">《隐私政策》</view>
                    </view>
                </block>
            </view>
        </u-popup>

	</view>
</template>
<script>
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
import platform from '@/wlkutils/platform';
import { toUrl } from '@/wlkutils/tools';
import {h5Login} from "../../wlkutils/wechat/h5";
var clear;
export default {
    name: 'f-login',
    computed: {
    	...mapGetters(['loginPopupShow','themeColor','isLogin','initMain']),
    },
	data() {
		return {
            // #ifdef APP-PLUS || H5
            isLoading:false,
            loginType:'sms',//auth 授权登录 sms 短信 pwd 密码 forget 忘记密码
            // #endif
            // #ifndef APP-PLUS || H5
            isLoading:false,
            loginType:'sms',//auth 授权登录 phone 短信或密码 forget 忘记密码
            // #endif
            readonly: false,
            codeText: '获取验证码',
            phone: '', //号码
            vCode: '', //验证码
            wxCode: '',  //uni.login获取的code
            code:'',//新版获取手机号code
            password:'',//登录密码
            inputStyle:{
                lineHeight: "102rpx",
                height: "94rpx"
            },
            btnStyle:{
              width:'188rpx'
            },
            subStyle:{
                backgroundColor:'transparent'
            },
            platform:platform.get(),
            isAgree: false, //是否同意协议

		};
	},
    watch:{

    },
	created() {
	},
	methods: {
        ...mapActions(["getUserInfo"]),
        ...mapMutations(["setLoginPopupShow"]),
        setLoginType(type){
            this.loginType = type;
        },
        //个人信息授权登录
        onAuthorization(e) {
            if(!this.checkAgree()){
                return;
            }
            // #ifdef MP-WEIXIN
            this.closeLogin();
            this.$store.commit('setShowWxLogin',true) //打开微信新授权组件
            // #endif
            // #ifdef H5
            this.closeLogin();
            h5Login()
            // #endif
        },
        //授权手机号登录
        async decryptPhoneNumber(e) {
            var that = this;
            // #ifdef MP-WEIXIN
			if(e.detail.errMsg == 'getPhoneNumber:ok'){
                let  wxCode = await that.getWxCode();
                if(!that.checkAgree()){
                    return;
                }
                if(e.detail.iv){
                    uni.$u.http.post('wechat/mpLogin', {
                        wxCode: wxCode,
                        code: e.detail.code,
                        encrypted_data: e.detail.encryptedData,
                        iv: e.detail.iv,
                        event: 'login',
                        agent_id:uni.$u.test.isEmpty(uni.getStorageSync('agent_id'))?0:null,
                    }).then(res => {
                        that.getUserInfo(res.data.token);
                        that.$u.toast(res.msg);
                        that.closeLogin();
                    }).catch(res => {
                        console.log(res)
                    })
                }else{
                    // 授权失败请使用验证码登录
                    this.loginType = 'sms';
                    this.$u.toast('请使用手机号登录');

                }
			}else{
                return false;
            }
            // #endif

		},
		closeLogin(){
            this.setLoginPopupShow(false);
            // #ifdef APP-PLUS || H5
            this.isLoading = false
            this.loginType = 'sms'
            // #endif
            // #ifndef APP-PLUS || H5
            this.isLoading = false
            this.loginType = 'sms'
            // #endif
		},

        //验证码按钮文字状态
        getCodeState() {
        	const _this = this;
        	this.readonly = true;
        	this.codeText = '60S后重新获取';
        	var s = 60;
        	clear = setInterval(() => {
        		s--;
        		_this.codeText = s + 'S后重新获取';
        		if (s <= 0) {
        			clearInterval(clear);
        			_this.codeText = '获取验证码';
        			_this.readonly = false;
        		}
        	}, 1000);
        },

        //获取验证码
        getVcode(){
            if(!this.checkAgree()){
                return;
            }
            const that = this;
            var event = 'smsLogin';
        	if (this.readonly) {
                this.$u.toast('验证码已发送~');
        		return;
        	}
        	if (uni.$u.test.isEmpty(this.phone)) {
                this.$u.toast('请输入手机号~');
        		return;
        	}
            if(!uni.$u.test.mobile(this.phone)){
                this.$u.toast('请输入正确的手机号码');
                return;
            }
            if(this.loginType=='forget'){
                event = 'resetpwd';
            }
            uni.$u.http.post('sms/send',
                {
                    mobile: that.phone,
                    event: event
                },
            ).then(res => {
                this.getCodeState();
                that.$u.toast('验证码已发送，请注意查收短信');
            });
        },

        // 手机号登录
        onSubmit() {
            const that = this;
            var api = '';
            if(!this.checkAgree()){
                return;
            }
            if(this.loginType=='pwd'){
                if (uni.$u.test.isEmpty(this.phone)) {
                    this.$u.toast('请输入手机号~');
                    return;
                }
                if (uni.$u.test.isEmpty(this.password)) {
                    this.$u.toast('请输入密码~');
                    return;
                }
                api = 'user/login';
            }else{
                if(!uni.$u.test.mobile(this.phone)){
                    this.$u.toast('请输入正确的手机号码');
                    return;
                }
                if (uni.$u.test.isEmpty(this.vCode)) {
                    this.$u.toast('请输入验证码~');
                    return;
                }
                api = 'user/smsLogin';
            }
            uni.$u.http.post(api,
                {
                    mobile: this.phone,
                    password: this.password,
                    captcha: this.vCode,
                    agent_id:uni.$u.test.isEmpty(uni.getStorageSync('agent_id'))?0:null,
                },
            ).then(res => {
                that.getUserInfo(res.data.token);
                that.$u.toast(res.msg);
                that.closeLogin();
            });
        },
        // 重置密码
        onForgetSubmit() {
            const that = this;
            if(!uni.$u.test.mobile(this.phone)){
                this.$u.toast('请输入正确的手机号码');
                return;
            }
            if (uni.$u.test.isEmpty(this.vCode)) {
                this.$u.toast('请输入验证码~');
                return;
            }
            if (uni.$u.test.isEmpty(this.password)) {
                this.$u.toast('请输入密码~');
                return;
            }
            uni.$u.http.post('user/forgetPwd',
                {
                    mobile: this.phone,
                    password: this.password,
                    captcha: this.vCode
                },
            ).then(res => {
                that.$u.toast(res.msg);
            });
        },
        getWxCode() {
            return new Promise((resolve, reject) => {
                uni.login({
                    success(res) {
                        resolve(res.code);
                    },

                    fail(res) {
                        reject(res);
                    }

                });
            });
        },
        checkAgree(){
            if(!this.isAgree){
                this.$u.toast('请先阅读并同意服务协议和隐私政策');
                return false;
            }else{
                return true;
            }
        },
        jump(id){
            if(id>0){
                this.closeLogin();
                let url = '/pages/article/detail?id='+id;
                toUrl(url);
            }

        }
	}
};
</script>

<style lang="scss" scoped>
.f__login {
    padding: 48rpx 32rpx;
    border-radius: 18rpx 18rpx 0 0;
    z-index: 99;
    position: relative;
    .head-box{
        margin-bottom: 80rpx;
        .text {
            font-size: 24rpx;
            color: #999;
            margin-top: 16rpx;
        }
    }
    .loginLoading {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, .95);
        z-index: 999;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .logo {
        overflow: hidden;
        margin-bottom: 50rpx;
        /*display: flex;*/
        /*justify-content: center;*/
        .img {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
        }
    }
    .title {
        font-size: 40rpx;
        font-weight: bold;
    }
    .loginButton {
        margin-top: 56rpx;
        .button {
            color: #fff;
            width: 100%;
            height: 92rpx;
            line-height: 92rpx;
            border-radius: 5px;
        }
        .marginT{
            margin-top: 24rpx;
        }
    }
    .tips {
        display: flex;
        /*flex-direction: row;*/
        justify-content: center;
        align-items: center;

        .left {
            display: flex;
            flex-direction: row;
        }
        .goBuy {
            font-size: 24rpx;
            background: none;
            /*display: flex;*/
            /*flex-direction: row;*/
            /*justify-content: center;*/
            /*align-items: center;*/
            /*flex-wrap: wrap;*/
            .go-icon{
                display: flex;
                align-items: center;
                justify-content: center;
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
            }
            .go-text{
                font-size: 24rpx;
                color:#999999;
                text-align: center;
            }

        }
    }
}
.loginPhone{
    .form-row {
        position: relative;
        /*border-bottom: 1rpx solid #edeff2;*/
        line-height: 1;
        margin-top: 24rpx;
        .input{
            line-height: 102rpx;
            height: 94rpx;
            width: 100%;
            box-sizing: border-box;
            font-size: 30rpx;
            padding: 0;
            font-weight: bold;
        }
        .getvcode {
            font-size: 26rpx;
            height: 70rpx;
            line-height: 70rpx;
            min-width: 188rpx;
            text-align: center;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            z-index: 11;
            border-radius: 100rpx;
            &.forhidden {
                background: #eee;
                color: #cccccc;
            }
        }
        .forget-btn{
            font-size: 26rpx;
            height: 80rpx;
            color: #999;
            line-height: 80rpx;
            min-width: 188rpx;
            text-align: center;
            border-radius: 8rpx;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            z-index: 11;
            &.forhidden {
                background: #eee;
                color: #cccccc;
            }
        }
    }
    .submit{
        margin-top: 30rpx;
        color: #fff;
        width: 100%;
        border: none;
        line-height: 92rpx;
        border-radius: 5px;
    }
}
.agreement{
    padding-top: 50rpx;
    .icon{
        width: 36rpx;
        height: 36rpx;
        border-radius: 36rpx;
        border: 1rpx solid #eee;
        justify-content: center;
    }
    .agree-text{
        padding-left: 10rpx;
        font-size: 26rpx;
        color: #999;
    }
    .and{
        font-size: 26rpx;
        color: #999;
    }
    .protocol{
        font-size: 26rpx;
        color: #999;
    }
}
</style>
